<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Remote Data via JSONP</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Remote Data via JSONP</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>
This example demonstrates how to provide autocomplete suggestions from a remote JSONP API. In this case, we're using <a href="http://develop.github.com/p/users.html">GitHub's user search API</a> to suggest GitHub usernames.
</p>

<p>
Try typing your GitHub username. If you don't have a GitHub account, try the names of some YUI developers: rgrove, lsmith, davglass, amoore, msweeney
</p>
</div>

<div class="example">
<div id="demo" class="yui3-skin-sam">
  <label for="ac-input">Enter a GitHub username:</label><br>
  <input id="ac-input" type="text">
</div>

<script>
YUI().use('autocomplete', 'autocomplete-highlighters', function (Y) {
  Y.one('#ac-input').plug(Y.Plugin.AutoComplete, {
    resultHighlighter: 'phraseMatch',
    resultListLocator: 'users',
    resultTextLocator: 'username',
    source: 'http://github.com/api/v2/json/user/search/{query}?callback={callback}'
  });
});
</script>

</div>

<h2>HTML</h2>

<pre class="code prettyprint">&lt;div id=&quot;demo&quot; class=&quot;yui3-skin-sam&quot;&gt;
  &lt;label for=&quot;ac-input&quot;&gt;Enter a GitHub username:&lt;&#x2F;label&gt;&lt;br&gt;
  &lt;input id=&quot;ac-input&quot; type=&quot;text&quot;&gt;
&lt;&#x2F;div&gt;</pre>


<h2>JavaScript</h2>

<h3>GitHub Response Data</h3>

<p>
The GitHub Users API returns a JavaScript object that looks like this:
</p>

<pre class="code prettyprint">{
  &quot;users&quot;: [
    {
      &quot;name&quot;: &quot;rgrove&quot;,
      &quot;location&quot;: &quot;Portland, OR&quot;,
      &quot;followers&quot;: 55,
      &quot;language&quot;: &quot;JavaScript&quot;,
      &quot;fullname&quot;: &quot;Ryan Grove&quot;,
      &quot;username&quot;: &quot;rgrove&quot;,
      &quot;id&quot;: &quot;user-1465&quot;,
      &quot;repos&quot;: 28,
      &quot;type&quot;: &quot;user&quot;,
      &quot;pushed&quot;: &quot;2010-11-06T00:15:08.327Z&quot;,
      &quot;score&quot;: 4.8103123,
      &quot;record&quot;: null,
      &quot;created&quot;: &quot;2008-02-28T07:08:51Z&quot;
    },

    ...
  ]
}</pre>


<p>
If the response were a simple array of strings, AutoComplete would interpret it correctly by default. However, in this case, the response is an object that contains a <code>users</code> property, the value of which is an array of result objects rather than an array of strings.
</p>

<p>
This means we'll need to specify a <a href="http://developer.yahoo.com/yui/3/api/AutoCompleteBase.html#config_resultListLocator"><code>resultListLocator</code></a> to indicate the property on the response object that contains the array of results, and a <a href="http://developer.yahoo.com/yui/3/api/AutoCompleteBase.html#config_resultTextLocator"><code>resultTextLocator</code></a> to indicate the property on each result object that contains the suggestion text, as demonstrated in the implementation code below.
</p>

<h3>Implementation</h3>

<pre class="code prettyprint">YUI().use(&#x27;autocomplete&#x27;, &#x27;autocomplete-highlighters&#x27;, function (Y) {
  Y.one(&#x27;#ac-input&#x27;).plug(Y.Plugin.AutoComplete, {
    resultHighlighter: &#x27;phraseMatch&#x27;,
    resultListLocator: &#x27;users&#x27;,
    resultTextLocator: &#x27;username&#x27;,
    source: &#x27;http:&#x2F;&#x2F;github.com&#x2F;api&#x2F;v2&#x2F;json&#x2F;user&#x2F;search&#x2F;{query}?callback={callback}&#x27;
  });
});</pre>


<h2>Complete Example Source</h2>

<pre class="code prettyprint">&lt;div id=&quot;demo&quot; class=&quot;yui3-skin-sam&quot;&gt;
  &lt;label for=&quot;ac-input&quot;&gt;Enter a GitHub username:&lt;&#x2F;label&gt;&lt;br&gt;
  &lt;input id=&quot;ac-input&quot; type=&quot;text&quot;&gt;
&lt;&#x2F;div&gt;

&lt;script&gt;
YUI().use(&#x27;autocomplete&#x27;, &#x27;autocomplete-highlighters&#x27;, function (Y) {
  Y.one(&#x27;#ac-input&#x27;).plug(Y.Plugin.AutoComplete, {
    resultHighlighter: &#x27;phraseMatch&#x27;,
    resultListLocator: &#x27;users&#x27;,
    resultTextLocator: &#x27;username&#x27;,
    source: &#x27;http:&#x2F;&#x2F;github.com&#x2F;api&#x2F;v2&#x2F;json&#x2F;user&#x2F;search&#x2F;{query}?callback={callback}&#x27;
  });
});
&lt;&#x2F;script&gt;</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="How to provide autocomplete suggestions from a local array.">
                                        <a href="ac-local.html">Basic Local Data</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to provide autocomplete suggestions using a remote JSONP source.">
                                        <a href="ac-jsonp.html">Remote Data via JSONP</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to provide autocomplete suggestions using a YQL query source.">
                                        <a href="ac-yql.html">Remote Data via YQL</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to provide autocomplete suggestions using a DataSource instance.">
                                        <a href="ac-datasource.html">Remote Data via DataSource</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to implement delimited tag completion.">
                                        <a href="ac-tagging.html">Tag Completion Using Query Delimiters</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to find and select Flickr photos using a YQL source and a custom autocomplete result formatter.">
                                        <a href="ac-flickr.html">Find Photos on Flickr (Custom Formatting, YQL Source)</a>
                                    </li>
                                
                            
                                
                                    <li data-description="How to use autocomplete-base to filter a set of existing items on a page.">
                                        <a href="ac-filter.html">Filter a Set of Existing Items on a Page</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
